<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能诊疗预约平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            neutral: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .hover-scale {
        transition: transform 0.3s ease;
      }
      .hover-scale:hover {
        transform: scale(1.02);
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<main>
  <!-- 统计分析 -->
  <section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">医疗数据分析</h2>
        <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
          我们通过大数据分析，为您提供全面的医疗资源使用情况和患者满意度分析。
        </p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h3 class="text-lg font-semibold mb-4">各科室预约量分布</h3>
          <div class="h-80">
            <canvas id="departmentChart"></canvas>
          </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
          <h3 class="text-lg font-semibold mb-4">医生工作量统计</h3>
          <div class="h-80">
            <canvas id="doctorChart"></canvas>
          </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
          <h3 class="text-lg font-semibold mb-4">患者满意度分析</h3>
          <div class="h-80">
            <canvas id="satisfactionChart"></canvas>
          </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
          <h3 class="text-lg font-semibold mb-4">高峰时段预测</h3>
          <div class="h-80">
            <canvas id="peakHoursChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<script>
  // 图表初始化
  document.addEventListener('DOMContentLoaded', () => {
    // 科室预约量图表
    const departmentCtx = document.getElementById('departmentChart').getContext('2d');
    new Chart(departmentCtx, {
      type: 'bar',
      data: {
        labels: ['心内科', '呼吸科', '消化科', '神经内科', '骨科', '儿科'],
        datasets: [{
          label: '本月预约量',
          data: [1250, 980, 1120, 850, 760, 1430],
          backgroundColor: [
            'rgba(22, 93, 255, 0.7)',
            'rgba(54, 207, 201, 0.7)',
            'rgba(255, 125, 0, 0.7)',
            'rgba(111, 92, 255, 0.7)',
            'rgba(255, 82, 82, 0.7)',
            'rgba(45, 184, 156, 0.7)'
          ],
          borderColor: [
            'rgba(22, 93, 255, 1)',
            'rgba(54, 207, 201, 1)',
            'rgba(255, 125, 0, 1)',
            'rgba(111, 92, 255, 1)',
            'rgba(255, 82, 82, 1)',
            'rgba(45, 184, 156, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // 医生工作量图表
    const doctorCtx = document.getElementById('doctorChart').getContext('2d');
    new Chart(doctorCtx, {
      type: 'line',
      data: {
        labels: ['张医生', '李医生', '王医生', '赵医生', '刘医生'],
        datasets: [{
          label: '诊疗患者数',
          data: [280, 250, 230, 210, 190],
          backgroundColor: 'rgba(22, 93, 255, 0.2)',
          borderColor: 'rgba(22, 93, 255, 1)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // 满意度分析图表
    const satisfactionCtx = document.getElementById('satisfactionChart').getContext('2d');
    new Chart(satisfactionCtx, {
      type: 'doughnut',
      data: {
        labels: ['非常满意', '满意', '一般', '不满意'],
        datasets: [{
          data: [65, 25, 8, 2],
          backgroundColor: [
            'rgba(45, 184, 156, 0.8)',
            'rgba(22, 93, 255, 0.8)',
            'rgba(255, 125, 0, 0.8)',
            'rgba(255, 82, 82, 0.8)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom'
          }
        }
      }
    });

    // 高峰时段图表
    const peakHoursCtx = document.getElementById('peakHoursChart').getContext('2d');
    new Chart(peakHoursCtx, {
      type: 'line',
      data: {
        labels: ['8:00', '9:00', '10:00', '11:00', '14:00', '15:00', '16:00'],
        datasets: [{
          label: '预约人数',
          data: [120, 190, 210, 180, 150, 170, 130],
          backgroundColor: 'rgba(54, 207, 201, 0.2)',
          borderColor: 'rgba(54, 207, 201, 1)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });
</script>


</body>
</html>